<template>
  <div class="app-container">
    <el-card class="operate-container" shadow="never" style="margin-bottom: 20px">
      <i class="el-icon-info" />
      <span>信息总览</span>
      <el-tag v-if="paperInfo.type===0" size="small" type="primary" effect="plain">考试答题</el-tag>
      <el-tag v-else size="small" type="success" effect="plain">调研答题</el-tag>
      <el-button size="mini" class="btn-add" type="primary" @click="goToQuestion()">题目详情</el-button>
      <el-button size="mini" class="btn-add" @click="goBack()"><i class="el-icon-arrow-left" />返回</el-button>
      <el-form ref="dataForm" :model="paperInfo" label-width="120px" style="margin-top: 15px" size="mini">
        <el-form-item label="考卷标题">
          <span style="width: 450px">{{ paperInfo.title }}</span>
          <el-tag v-if="paperInfo.status===0" size="mini" type="info">未发布</el-tag>
          <el-tag v-else size="mini" type="success">已发布</el-tag>
        </el-form-item>
        <el-form-item label="起止时间">
          <span>{{ paperInfo.startTime }} 至 {{ paperInfo.endTime }}</span>
          <el-tag v-if="isLaterThanNow(paperInfo.startTime)" size="mini" type="info">未开始</el-tag>
          <el-tag v-else-if="!isLaterThanNow(paperInfo.endTime)" size="mini" type="info">已截止</el-tag>
          <el-tag v-else size="mini" type="success">进行中</el-tag>
        </el-form-item>
        <el-form-item label="题目数量">
          <span>{{ paperInfo.totalQuestionNum }} 题</span>
        </el-form-item>
        <el-form-item v-show="paperInfo.type===0" label="考卷总分">
          <span>{{ paperInfo.totalScore }} 分</span>
        </el-form-item>
        <el-form-item label="完成人数">
          <span>{{ paperInfo.totalUserNum }} 人</span>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="operate-container" shadow="never" style="margin-bottom: 20px">
      <i class="el-icon-tickets" />
      <span>得分排行榜</span>
      <el-button size="mini" class="btn-add" type="primary" icon="el-icon-download" @click="handleExportRankUserList()">导出名单</el-button>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        max-height="690"
        highlight-current-row
        style="width: 100%; margin-top: 20px"
        :row-style="{height:'32px'}"
        tooltip-effect="light"
      >
        <el-table-column label="名次" align="center" width="150px">
          <template slot-scope="{row}">
            <span>No. {{ row.rank }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户编号" align="center" width="150px">
          <template slot-scope="{row}">
            <span>{{ row.userId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="真实姓名" align="center">
          <template slot-scope="{row}">
            <span>{{ row.realName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template slot-scope="{row}">
            <span>{{ row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分数" align="center">
          <template slot-scope="{row}">
            <span v-if="paperInfo.type===0">{{ row.score }}</span>
            <span v-else>/</span>
          </template>
        </el-table-column>
        <el-table-column label="正确率" align="center">
          <template slot-scope="{row}">
            <span v-if="paperInfo.type===0">{{ Math.round(row.correctNum / row.totalNum * 100) }}%</span>
            <span v-else>/</span>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.answerStartTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.answerEndTime }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page-num.sync="listQuery.pageNum" :page-size.sync="listQuery.pageSize" @pagination="showRankUserList" />

    </el-card>

  </div>
</template>

<script>
import {
  getPaperRankUsers,
  getPaperRankBaseInfo,
  exportRankUserList
} from '@/api/exam'
import { isLaterThanNow } from '@/utils/date'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'

export default {
  name: 'PaperRank',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      dialogLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 20
      },
      paperInfo: {}
    }
  },
  created() {
    this.getPaperRankBaseInfo()
    this.showRankUserList()
  },
  methods: {
    getPaperRankBaseInfo() {
      getPaperRankBaseInfo(this.$route.params.paperId).then(response => {
        this.paperInfo = response.data
      })
    },
    showRankUserList() {
      this.listLoading = true
      getPaperRankUsers(this.$route.params.paperId, this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.showRankUserList()
    },
    isLaterThanNow(date) {
      return isLaterThanNow(date)
    },
    goBack() {
      this.$router.go(-1)
    },
    goToQuestion() {
      this.$router.push({
        name: 'ExamQuestion',
        params: {
          paperId: this.$route.params.paperId
        }
      })
    },
    handleExportRankUserList() {
      const loading = this.$loading({
        lock: true,
        text: '正在导出中，请耐心等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      exportRankUserList(this.$route.params.paperId).then((response) => {
        this.$notify({
          title: '排行榜人员名单导出成功',
          dangerouslyUseHTMLString: true,
          message: '<p>已生成排行榜人员信息名单，请下载：</p>' +
            '<a target="_blank" href="' + response.data + '">' +
            '<strong style="text-decoration: underline">点击下载</strong>' +
            '</a>',
          type: 'success',
          duration: 0
        })
        loading.close()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .issue-content {
    font-size: 18px;
    line-height: 31px;
  }
  .operate-container .btn-add {
    float: right;
    margin-left: 10px;
  }
</style>
